<template>
	<view class="page">
		<view class="box" v-for="(i,index) in dataList" :key="index" @tap.stop="choose(index,i)">
			<view class="left">
				<view class="pic">
					<image :src="$imageOss(i.image)" mode=""></image>
				</view>
				<view class="tit">
					<view class="name">{{i.name}}卡</view>
					<view class="name">{{i.number}}</view>
				</view>
			</view>
			<view class="right">
				<image src="../../static/my/yesmall.png" mode="" v-if="i.status"></image>
				<u-icon name="trash" size="18" v-else @tap.stop="delCard(i.id)"></u-icon>
			</view>
		</view>
		<view class="btn" @tap.stop="withdrawal">确定</view>
	</view>
</template>

<script>
	import {
		commonUpload
	} from "@/request/common.js";
	import {
		bankList,
		bankDel
	} from "@/request/myApi.js";
	import But from "@/components/Button/index.vue";
	export default {
		components: {
			But
		},
		data() {
			return {
				dataList: [],
			};
		},

		onLoad() {
			this.getList();
		},
		methods: {
			withdrawal() {
				this.dataList.forEach(item => {
					if (item.status == true) {
						uni.setStorageSync('card', JSON.stringify(item));
						console.log(item,'item')
					}
				})
			
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					})
				},1000)
			},
			choose(e, item) {
				this.dataList.forEach((i, index) => {
					if (index == e) {
						i.status = !i.status;
					} else {
						i.status = false;
					}
				});
				console.log(item.status,'pppp')
			},
			delCard(id) {
				let that = this
				bankDel({
					id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1500,
						icon: 'none',
					})
					if (res.code == 200) {
						that.getList();
					}
				})
			},
			getList() {
				let that = this
				bankList().then(res => {
					if (res.code == 200) {
						let laberList = ['工商银行', '农业银行', '中国银行', '建设银行', '招商银行', '平安银行', '民生银行', '邮政银行']
						that.dataList = res.data.map(item => {
							return {
								...item,
								number: item.number ? item.number.substr(0, 4) + ' **** **** **** **** ' +
									item.number.substr(item.number.length - 4) : '',
								laber: laberList[item.bank - 1],
								status:false
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
		background-color: transparent !important;
		padding: 0;
	}

	.page {
		height: 90vh;
		overflow-y: auto;

		.box {
			margin: 20rpx 28rpx;
			border-radius: 20rpx;
			background-color: #F7F7F7;
			padding: 20rpx;
			display: flex;
			align-items: center;

			.right {
				image {
					width: 46rpx;
					height: 36rpx;
				}
			}

			.left {
				width: 90%;
				display: flex;
				align-items: center;

				.pic {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin: 0rpx 20rpx;
					// image{
					// 	border-radius: 50%;
					// }
				}

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.tit {
					font-size: 28rpx;
					color: #979797;
					margin: 10rpx;

					.name {
						color: #000;
						height: 50rpx;
						line-height: 50rpx;
					}
				}
			}
		}

		.btn {
			width: 90%;
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			// border-radius: 96rpx;
			border-radius: 20rpx;
			background-color: #58B99D;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			position: fixed;
			left: 50%;
			bottom: 40rpx;
			transform: translateX(-50%);
		}
	}
</style>